<template>
	<view style="height: 45px;">
		<scroll-view :style="headerTopStyle" scroll-x class="bg-white nav " :class="[center ? 'text-center' : '',props.fixed?'header':'']">
			<view class="cu-item text-center" :class="index == current ? 'text-menu-color cur' : ''" v-for="(item, index) in list" :key="index" @click="handleTabSelect(index)" >
				{{ item.name }}
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
import { useSettingStore } from '@/stores/index';
import { watch, ref, computed } from 'vue';
const setting = useSettingStore();
const emit = defineEmits(['action']);
let scrollLeft = 0;
const props = defineProps({
	dotStyle: {
		type: [Boolean, String],
		default: false
	},
	bgImage: {
		type: String,
		default: ''
	},
	list: {
		default: ()=>{
			return [{name:''}]
		}
	},
	center: {
		type: [Boolean, String],
		default: true
	},
	value: {
		type: Number,
		default: 0
	},
	fixed: {
		type: Boolean,
		default: false
	}
});
const headerTopStyle = computed(() => {
	var height = setting.CustomBar+50;
	if (props.fixed) {
		return `position: fixed;top: ${height}px;z-index: 1000;left: 0;right: 0;`;
	}else {
		return ''
	}
});
const current = ref(0);
watch(
	() => props.value,
	(newValue, oldValue) => {
		current.value = newValue;
	}
);

const handleTabSelect = (index: any) => {
	current.value = index;
	scrollLeft = (index - 1) * 60;
	emit('action', current.value);
};
</script>

<style>

</style>
